<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2018/8/29 0029
  Time: 9:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>火车票订单-阿里旅行</title>

    <jsp:include page="common/common.jsp" />
    <link rel="stylesheet" href="/css/openOrder.css">
    <script src="/js/openOrder.js"></script>
</head>
<body>
<div class="header">
    <div class="header-content">
        <h1>
            <a href="//www.fliggy.com" title="飞猪" class="header-logo-link">飞猪</a>
            <s class="header-point"></s><strong class="header-logo-huochepiao">
            <a href="//train.alitrip.com/stsSearch.htm" title="火车票" class="火车票">火车票</a>
        </strong>
            <span class="steps">
                <span class="step">1</span><span>填写订单</span>
                <span class="step" style="background-color: #ccc">2</span><span>确认订单</span>
                <span class="step" style="background-color: #ccc">3</span><span>支付并完成</span>
            </span>

        </h1>
    </div>
</div>

<article>
    <form action="/order" method="post">
        <div class="traininfo">
            <div class="bd">
                <table>
                    <tbody>
                    <tr>
                        <td class="train-depart">
                            <header class="trinfo-head"><span class="station">${vehicleModel.depStationName}</span>
                                <span class="text">出发</span>
                            </header>
                            <div class="date-time clearfix">
                                <div class="date-time-cont clearfix"><span class="date" id="dep_date">
                                <fmt:formatDate type="date" value="${vehicleModel.depDate}" pattern="yyyy-MM-dd"/></span>
                                    <span class="time">${vehicleModel.depTime}</span>
                                </div>
                            </div>
                        </td>
                        <td class="train-info">
                            <ul class="train-info-list">
                                <li class="train-meta"><span class="train-type">
                                <c:choose>
                                    <c:when test="${vehicleModel.category == 1}">高铁</c:when>
                                    <c:when test="${vehicleModel.category == 2}">新空快速</c:when>
                                </c:choose>
                            </span>
                                    <span class="train-num">${vehicleModel.vehicleNo}</span>
                                    <%--向后台隐藏传值的 input start--%>
                                    <%--列车编号--%>
                                    <input type="hidden" name="vehicleNo" value="${vehicleModel.vehicleNo}"/>
                                    <input type="hidden" name="vehicleId" value="${vehicleModel.id}"/>
                                    <%--出发站--%>
                                    <input type="hidden" name="depStation" value="${vehicleModel.depStation}"/>
                                    <%--到达站--%>
                                    <input type="hidden" name="arrStation" value="${vehicleModel.arrStation}"/>
                                    <%--到达时间--%>
                                    <input type="hidden" name="arrTime" value="${vehicleModel.arrTime}"/>
                                    <%--离开时间--%>
                                    <input type="hidden" name="depTime" value="${vehicleModel.depTime}"/>
                                    <%--向后台隐藏传值的 input end--%>
                                </li>
                                <li class="trinfo-sprite trinfo-split"></li>
                                <li class="time-cost"><i class="trinfo-sprite clock-icon"></i>
                                    <span>01时54分------</span>
                                </li>
                            </ul>
                        </td>
                        <td class="train-arrive">
                            <header class="trinfo-head"><span class="station">${vehicleModel.arrStationName}</span>
                                <span class="text">到达</span>
                            </header>
                            <div class="date-time clearfix">
                                <div class="date-time-cont clearfix"><span class="date">
                            <fmt:formatDate type="date" value="${vehicleModel.depDate}" pattern="yyyy-MM-dd"/></span>
                                    </span>
                                    <span class="time">${vehicleModel.arrTime}</span>
                                </div>
                            </div>
                        </td>
                        <td class="seat-type-wrap confirm-info-td">
                            <header class="trinfo-head">座席类型</header>
                            <div class="seat-type-icon confirm-info-cont clearfix">
                                <span class="trinfo-sprite J_SeatType seat-seat">硬座</span>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="seat">
            <h3>第一步:选择座席</h3>
            <div class="clearfix">
                <div class="seat-item">
                    <label><input type="radio" name="seatType" value="0">无座</label>
                    <span class="seat-price">¥32.5</span>
                    <span class="few-tip">少量</span>
                    <span class="soldout-tip">（无票）</span>
                    <span class="checking-tip">验票中..</span><i></i>
                </div>
                <div class="seat-item">
                    <label><input type="radio" name="seatType" value="1">硬座</label>
                    <span class="seat-price">¥32.5</span>
                    <span class="few-tip">少量</span>
                    <span class="soldout-tip">（无票）</span>
                    <span class="checking-tip">验票中..</span><i></i>
                </div>
            </div>
            <p class="tips">卧铺上中下铺位是随机的，预订暂收下铺价格，出票后根据实际票价退差价。</p>
        </div>
        <div class="passenger">
            <div class="passenger-info">
                <h3>第二步:填写乘客信息</h3>
                <div class="passenger_wrap">
                    <table id="passenger_1">
                        <thead><tr><input type="button" value="删除" onclick="del_('passenger_1')" /></tr></thead>
                        <tr>
                            <td class="label_">姓名：</td>
                            <td><span class="star">*</span></td>
                            <td><input type="text" name="name" id="passenger_name_1"/></td>
                        </tr>
                        <tr>
                            <td class="label_">证件类型：</td>
                            <td><span class="star">*</span></td>
                            <td>
                                <select name="cardType" id="passenger_card_type_1">
                                    <!-- <option value="identity">身份证</option>
                                    <option value="passport">护照</option>
                                    <option value="huixiang">港澳通行证</option>
                                    <option value="taibao">台湾通行证</option> -->
                                    <option value="1">身份证</option>
                                    <option value="2">护照</option>
                                    <option value="3">港澳通行证</option>
                                    <option value="4">台湾通行证</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td class="label_">证件号码：</td>
                            <td><span class="star">*</span></td>
                            <td><input type="text" name="cardNo" id="passenger_card_no_1"/></td>
                        </tr>
                        <tr>
                            <td class="label_">生日：</td>
                            <td><span class="star">*</span></td>
                            <td><input type="date" name="birth" id="passenger_birth_1"/></td>
                        </tr>
                    </table>
                </div>

                <div>
                    <input type="button" id="add_passenger" value="添加乘客"/>
                </div>
            </div>
            <hr style="border-color: lightgrey"/>
            <div class="connection">
                <h3>第三步:填写联系人信息</h3>
                <table>
                    <tr>
                        <td class="label_">姓名：</td>
                        <td><span class="star">*</span></td>
                        <td><input type="text" name="contact"/></td>
                    </tr>
                    <tr>
                        <td class="label_">手机号码：</td>
                        <td><span class="star">*</span></td>
                        <td><input type="text" name="tel"/></td>
                    </tr>
                    <tr>
                        <td class="label_">电子邮箱：</td>
                        <td><span></span></td>
                        <td><input type="text" name="email"/></td>
                    </tr>
                </table>
            </div>
            <br/>
            <div>
                <h3>第四步:购买须知</h3>
                <div style="padding-left:50px">
                    <p style="color: red;">1、火车票无法保证100%出票，请您谅解！</p>
                    <p>2、出票失败后，将短信通知，票款退回至您的支付宝中。</p>
                    <p>3、卧铺铺位是随机分配的，预定时暂收下铺价格，出票成功后会根据实际票价退还差价。</p>
                </div>
            </div>
            <div class="summary" style="padding-left:50px;margin-top: 50px">
                <p>订单总金额：<span id="summary">¥0</span></p>
                <p style="line-height: 32px">
                    <button type="submit" id="submit"
                       style="padding:7px 10px;background: #0092d2;cursor: pointer;text-decoration: none;line-height: 32px">
                        <span style="color: #fff;margin: 0 10px 0 20px;font-size: 16px;font-weight: 700;">下一步</span>
                        <span style="color: #fff;font-size: 12px;font-weight: 400;margin-right: 20px;">确认订单</span>
                    </button>
                </p>
            </div>
        </div>
    </form>
</article>

</body>
</html>
